<template>
  <div class="pagination">
    <!-- 上一页的按钮，如果当前选择是第一页的话就不能再点了 -->
    <!-- 给上一页绑定点击事件，点击的时候调用父组件传过来的事件，并把当前页减1的页码传过去 -->
    <button :disabled="pageNo===1" @click="$emit('newPageNo',pageNo-1)">上一页</button>
    <!-- 前面的固定页码1，需要连续页的起始页大于1再展示，如果连续页的起始页也是1，就会有两个1的页码 -->
    <button v-show="startEndPage.start>1"  @click="$emit('newPageNo',1)">1</button>
    <!--连续页前面的三个点，是要当连续页的起始页大于2再展示，如果等于2，和固定页码1是连续的，中间不需要... -->
    <button v-show="startEndPage.start>2">···</button>
    <!-- 遍历生成的页码，直接遍历已经过滤好的数组 -->
    <!-- 在点击页码时，选择哪个页码哪个页码再进行高亮 -->
    <!-- 在父组件中给页码组件绑定自定义事件，当在页码组件中点击页码时调用，并把当前页码传过去,在父组件中拿到传的页码，设置给data，并重新发请求-->
    <button v-for=" page in startEndArr" :key="page" :class="{active:pageNo===page}" @click="$emit('newPageNo',page)">{{page}}</button>
    
    <!-- 连续页后面的三个点，当连续页的结束页大于总页数-1时，就不展示了 -->
    <button v-show="startEndPage.end<totalPages-1">···</button>
    <!--后面的固定页码，当连续页的结束页小于总页数再展示  -->
    <button v-show="startEndPage.end < totalPages" :class="{active:pageNo===totalPages}" @click="$emit('newPageNo',totalPages)">{{totalPages}}</button>
    <!-- 下一页的按钮，当前页为最后一页时，就禁用 -->
    <!-- 给下一页绑定点击事件，点击的时候调用父组件传过来的事件，并把当前页加1的页码传过去 -->
    <button :disabled="pageNo===totalPages" @click="$emit('newPageNo',pageNo+1)">下一页</button>
    <!-- 总条数，通过父组件传过来的总数 -->
    <button style="margin-left: 30px">共{{total}}条</button>
  </div>
</template>

<script>
export default {
  name: "Pagenation",
  props: ["totalPages", "pageNo", "continuePage","total"],
  computed: {
    //页码想实现的效果是，选择的页码永远在连续页码的中间，两边永远是1...和...总页数，当选择的页码靠近1和最后一页，没办法处于连续页的中间时，就没有...
    //计算起始页和结束页
    startEndPage() {
      //定义的statr和end是连续页的起始和结束页码，两边是有固定的页码1，
      let start = 0;
      let end = 0;
      //如果页码的连续页大于总页数,起始页码是1，结束页就是总页数
      if (this.continuePage > this.totalPages) {
        start = 1; end = this.totalPages;
      } else {
        //如果总页数大于连续页
        //根据当前页码，计算出连续页的开头和结尾，假如当前页是3，连续页是3，则连续页的开头就是2，结束就是4,开头就是当前页减去（连续页除以2向下取整的数）
        start = this.pageNo - Math.floor(this.continuePage / 2);
        end = this.pageNo + Math.floor(this.continuePage / 2);
        //假如设置的连续页是3，当前选择的页码是1，那么就会导致开头是0，结束是2，但没有第0页，所以就要做一个限制条件
        if (start < 1) {
          //如果start小于1  则直接设置起始为1
          start = 1;
          //如果start已经变成1了 则直接设置end为连续页长度
          end = this.continuePage;
        }
        if (end > this.totalPages) {
          //如果end大于总页数,则直接设置end为总页数

          end = this.totalPages;
          start = this.totalPages - this.continuePage + 1;
        }
      }
      return {start,end}
    },
    //在模板中，除了前面固定的1 和 后面固定的最后一页的页码，中间的连续页码是通过当前选择的页码而遍历生成的页码展示，假如选择的是5，连续页是3，为了保持选择页在连续页的中间，那么要遍历生成的就是456，结束页是6，遍历6的话就会生成1-6，但只需要大于等于起始页到结束页之间的页码，所以不仅要使用v-for，还要使用v-if，但两者不能一起使用，所以就先将需要遍历的数据先过滤后，再遍历
    /*
        特殊情况1：（最后面的固定页码情况也一样）
        最前面的固定页码1，一般会当连续页码的开始页大于1再展示，如果连续页码的开始页等于1，就代表选择的是第2页，那么需要连续的页码就是123，如果此时固定页码还展示，就有两个1的页码
        特殊情况2：
        如果选择的是3，那么遍历生成的就是234，此时固定的1也会展示，那么连续的页码就会是4个
    
    */ 
    /* 
      但永远不要把 v-if 和 v-for 同时用在同一个元素上
        - 因为v-for的优先级高于v-if
        - 先遍历生成结构,然后再判断去掉某些结构,对性能来说不友好
        - 解决方法:1.把v-for遍历的数据用计算数据先行过滤   2. 多增添一层结构分开书写v-if和v-for
    */
    startEndArr(){
        const arr =[]
        for(var i = 1;i<=this.startEndPage.end;i++ ){
            if(i>=this.startEndPage.start){
                arr.push(i)
            }
        }
        return arr
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>